<template>
	<div class="banner-box" :class="isIos && getPlatform=='app' ?'banner-box-ios':''">
		<!-- 头部 -->
	    <ZxyhHeader  v-if = "getPlatform =='app'"></ZxyhHeader>
		<div class="banner-wrappr-box">
				<img :src="bannerBg+'?x-oss-process=image/resize,m_fixed,h_424,w_750'" />				 
		</div>
		<div  class="banner" v-if = 'isBannerBox'>
			<swiper  ref="mySwiper" :options="swiperOption" class="sw">
				<swiper-slide v-for="(v,index) in bannerDataArray" :data-index = 'index' :key="index">
					<!--banner 用了v-lazy渲染的比较慢改成之前src-->
					<!--<img v-lazy="v.coverImagUrl" @click="clickBannerImg(v.type,v.imagUrl,v.link,v.id)" />-->
					<img :src="v.coverImagUrl+'?x-oss-process=image/resize,m_fixed,h_390,w_690'"  :data-v =' JSON.stringify(v)'/>
					<p v-if="v.adBlock=='1'" class="advertising-text">广告</p>
					<!--直播    zbState  0 预告 1 直播-->
					<template v-if="v.type=='3'">
						<template v-if="v.zbState=='0'">
							<div class="banner-preview">
							   <div class="clock-div">
							   	  <img src="../../assets/images/zxyh/preview-clock.png"/>
							   </div>
							   	 <span class="preview-text">预告</span>
							     <span class="preview-time">{{v.beginTime | filterTime}}</span>							  
							</div>
						</template>
						<template v-if="v.zbState=='1'">
							<div class="live-time">
								<div class="gif-box">
									<img src="../../assets/images/zxyh/live-gif.gif"/>
								</div>
								<span class="live-text">直播中</span>
								<div class="person-icon" v-if="v.fwCount!=null"></div>
								<span class="person-num" v-if="v.fwCount!=null">{{v.fwCount | filterNum(1)}}</span>	
							</div>
						</template>
						<template v-if="v.zbState=='2'">
							<div class="banner-back-box">
								<div class="back-icon-box">
									<img src="../../assets/images/zxyh/banner-back-icon.png"/>
								</div>							
								<span class="back-text">回放</span>
						    </div>
						</template>
						<div class="title-box" :data-v =' JSON.stringify(v)'>
							<p>{{v.title}}</p>
						</div>
					</template>
					<!--回看-->
					<template v-if="v.type=='4'">
						<div class="banner-back-box">
							<div class="back-icon-box">
								<img src="../../assets/images/zxyh/banner-back-icon.png"/>
							</div>							
							<span class="back-text">回放</span>
						</div>
						<div class="title-box" :data-v =' JSON.stringify(v)'>
							<p>{{v.title}}</p>
						</div>
					</template>
				</swiper-slide>
				<div class="swiper-pagination" v-if="bannerDataArray.length>1" slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>

<script>
import ZxyhHeader from "@/components/zxyh/zxyhHeader";
	export default {
		props:{
			bannerDataArray:{
				type:Object,
				default:[]
			}
		},
		components: {
			ZxyhHeader
		},
		filters:{
			filterNum:function(type,fixed){
             if(typeof type == "undefined"){
             	return 0
             }else if(type < 10000) {
					return type
				} else {
					return(type / 10000).toFixed(fixed) + "w";
				}
			},
			filterTime:function(type){
				if(type){
					return `${type.slice(5,7)}月${type.slice(8,10)}日  ${type.slice(11,13)}:${type.slice(14,16)}`
				}				
			}
		},
		data() {
			return {
				isIos,
				getPlatform:fun.getPlatform(),//wx app
				isBannerBox:false,
				bannerArray: [],
				bannerIndex:null,
				bannerBg:'',//banner虚化背景图
				swiperOption: {
					loop: true,
					slidesPerView: 'auto',
//					loopedSlides: 2,
					initialSlide: 0,
					autoplay: {
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination',
					},
					observer:true,
					observeParents: true,
					on: {
					    slideChangeTransitionStart:(event)=>{		
					    let _this = this;
                           let currentDom = document.getElementsByClassName("swiper-slide-active")[0];
                           if(currentDom){
                              	let index = currentDom.getAttribute('data-index');
                                _this.bannerBg = _this.bannerDataArray[index].coverImagUrl;
                           }                           					   
					    },
					    click:(event)=>{
					    	if(event.target.getAttribute('data-v')){
					    		let obj = JSON.parse(event.target.getAttribute('data-v'))
					    	    this.clickBannerImg(obj)
					    	}					    	
					    },
				  },
				},
				
			}
		},
		watch:{
			
		},
		computed: {
	      swiper() {
	        return this.$refs.mySwiper.$swiper
	      }
       },
		created() {
			//父组件已经判断非空
			if(this.bannerDataArray.length=='1'){
				this.swiperOption.loop = false
			}
			this.bannerBg = this.bannerDataArray[0].coverImagUrl;
			this.isBannerBox = true;
		},
		methods: {
			clickBannerImg(obj) { //banner 的id      zbState: 0 - 预告 1 - 正在直播 2-回放     
				fun.dotNum("homeBanner" + obj.id)
				switch(obj.type) {//1  是图片链接  2 是 url   3是直播间   4 回看
					case 1:
						this.$store.dispatch("dispatchBannerImgLink", obj.imagUrl)
						this.$router.push(`/${this.$channel}/bannerLink`);
						break;
					case 2:
						if(this.$channel=='zxyh' && window.terminal.isZxyhApp){ //中信银行app跳外链
							fun.openUrl(obj.link)
						}else{
                             window.location.href = obj.link
						}
						
						break;
					case 3://直播间
						this.$router.push(`/${this.$channel}/liveRoom/${obj.roomId}?dzhPage=true`);
						break;
					case 4://回看 relVid
					    this.$router.push(`/${this.$channel}/liveBack/${obj.relVid}?dzhPage=true`);
						break;
					default:
						break;
				}
			},
		}
	}
</script>
<style scoped="scoped">

 .banner>>> .swiper-slide{
 	width: 690px;
	height: 390px;
	overflow: hidden;
	display: block;
	margin-right: 2px;
 	/*border-radius: 0 0 9px 9px;*/
 }
	.title-box{
		width: 690px;
		height: 189px;
		border-radius: 0 0 9px 9px;
		position: absolute;
		bottom: 0;
		left: 0;
		background: linear-gradient(0deg, rgba(3, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
	}
	.title-box p{
		width: 500px;
		font-size: 28px;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 34px;
		/*background: darkgoldenrod;*/
		position: absolute;
		bottom: 28px;
		left: 38px;
	}
	.advertising-text{
		border: 1px solid #FFFFFF;
		opacity: 0.6;
		font-size: 16px;
		font-weight: normal;
		color: #FFFFFF;
		position: absolute;
		top: 34px;
		left: 20px;
		text-shadow: 0px 4px 9px rgba(0, 0, 0, 0.6);
		/*background: pink;*/
	}
	.back-text{
		margin-left: 5px;
	}
	.banner-back-box{
		width: 118px;
		height: 36px;
		line-height: 36px;
		position: absolute;
		top: 24px;
		right: 30px;
		display: flex;
		background: rgba(0,0,0,0.6);
		color: white;
		border-radius: 18px;
		font-size: 19px;
	}
	.back-icon-box{
		width: 47px;
		height: 36px;
		background: linear-gradient(0deg, #265EEC 0%, #45FFE3 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 18px;
	}
	.back-icon-box img{
		width: 21px !important;
		height: 18px !important;
	}
		.person-num{
		font-size: 19px;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 36px;
		display: inline-block;
	}
	.person-icon{
		width: 13px;
		height: 15px;
		background: url(../../assets/images/zxyh/small-person-icon.png) no-repeat;
		background-size: 13px 15px;
		margin: 0 10px  0 0;
	}
		.gif-box{
		width: 47px;
		height: 36px;
		background: linear-gradient(0deg, #EC2639 0%, #FF6845 100%);
		border-radius: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.gif-box img{
		width: 21px !important;
		height: 19px !important;
	}
	.live-time{
		/*width: 188px;*/
		height: 36px;
		background: rgba(0,0,0,0.6);
	  position: absolute;
	  top: 24px;
	 right: 30px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding-right: 13px;
	  border-radius: 18px;
	  color: white;
	  font-size: 19px;
	  font-weight: 500;
	}
	.preview-text{
        display: inline-block;
        line-height: 36px;
		margin: 0 14px  0  3px;
		font-size: 20px;
		margin-top: 2px;
	}
	.preview-time{
		display: inline-block;
		line-height: 36px;
		font-size: 20px;
		margin-top: 2px;
	}
	.live-text{
		margin: 0 10px  0  3px;
	}
	.banner-preview{
		height: 36px;
		line-height: 36px;
		border-radius: 18px;
		background: rgba(0,0,0,0.6);
		position: absolute;
		top: 24px;
		right: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: initial;
		padding-right: 10px;
	}
	.banner-preview .clock-div{
		width: 47px;
		height: 36px;
		background: linear-gradient(180deg, #FFAB49 0%, #FD552E 99%);		
		border-radius: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.clock-div img{
		width: 21px !important;
		height: 18px !important;
	}

	.banner {
		width: 690px;
		height: 390px;
		/*background: seagreen;*/
		position: absolute;
		top: 138px;
		left: 30px;
		border-radius: 9px;
		overflow: hidden;
	}
	.banner >>>.swiper-pagination{
		/*width: 9px;
		height: 9px;*/
		text-align: right;
		padding: 0 30px 20px 0;
	}
	.banner >>>.swiper-pagination-bullet{
		width: 9px;
		height: 9px;
		margin:0  4px;
	}
	.banner img {
		width: 690px;
		height: 390px;
		border-radius: 9px;
	}
	
	.banner-box {
		width: 750px;
		height: 560px;
		position: relative;
	}
	
	.banner-wrappr-box {
		width: 750px;
		height: 452px;
		overflow: hidden;
		/*background: url(../../assets/images/invitation/vbg1.png);*/
		/*	background: saddlebrown;*/
		/*filter: blur(10px);*/
		
	}
	.banner-wrappr-box img{
		width: 750px;
		height: 452px;
		transform: scale(2);
		filter: blur(20px);
	}
	.banner-box-ios{
      height:580px;
	}
	.header-conatiner-zxyhIos,.header-conatiner{
		position: absolute;
		z-index: 2;
	}
	.banner-box /deep/ .header-empty,.banner-box  /deep/ .header-box,.banner-box  /deep/ .header-left{
    background: none!important;
    color: white;
  }
  .header-conatiner-zxyhIos ~ .banner{
      top: 158px;
  }
</style>